<template>
  <div
    v-if="visible"
    ref="draggable-dialog"
    v-draggableDialog="draggable"
    :class="[
      'draggable-dialog',
      { 'draggable-dialog--center': center },
      customClass,
    ]"
    :style="style"
  >
    <button
        v-if="showClose"
        type="button"
        class="draggable-dialog__headerbtn"
        @click="handleClose"
      >
        <i class="draggable-dialog__close el-icon el-icon-close"></i>
    </button>
    <div v-if="title && !$slots.title" class="draggable-dialog__header">
      <slot name="title">
        <span class="draggable-dialog__title">{{ title }}</span>
      </slot>
    </div>
    <slot name="title"></slot>
    <div class="draggable-dialog__body"><slot></slot></div>
    <div v-if="$slots.footer" class="draggable-dialog__footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    // 默认可拖拽移动位置
    draggable: {
      type: Boolean,
      default: true,
    },

    showClose: {
      type: Boolean,
      default: true,
    },

    width: String,
    customClass: {
      type: String,
      default: "",
    },

    top: {
      type: String,
      default: "50vh",
    },
    left: {
      type: String,
      default: "50vh",
    },
    beforeClose: Function,
    center: {
      type: Boolean,
      default: false,
    },

    destroyOnClose: Boolean,
  },
  data() {
    return {
      closed: false,
    };
  },
  computed: {
    style() {
      const style = {};
      if (this.top) {
        style.top = this.top;
      }

      if (this.left) {
        style.left = this.left;
      }

      if (this.width) {
        style.width = this.width;
      }
      return style;
    },
  },
  methods: {
    handleClose() {
      if (typeof this.beforeClose === "function") {
        this.beforeClose(this.hide);
      } else {
        this.hide();
      }
    },
    hide(cancel) {
      if (cancel !== false) {
        this.$emit("update:visible", false);
        this.$emit("close");
        this.closed = true;
      }
    },
  },
};
</script>
